<template>
	<scroll-view :style="'background-color: rgb(242,242,242);height: ' + viewHeight + 'px;'" :scroll-y="true"
		@scrolltolower="scrolltolower">
		<view class="swiper-container">
			<u-swiper :list="swiperList" indicator indicatorMode="line" indicatorStyle="right: 20rpx" height="360"
				radius="15"></u-swiper>
		</view>
		<u-gap height="40"></u-gap>
		<view class="news-container">
			<view style="font-size: 18px;font-weight: bold;padding: 20rpx 0 20rpx 20rpx;">童话合集</view>
			<u-grid :border="false" col="4">
				<navigator url="/pages/idiom/idiom" open-type="redirect">
					<u-grid-item v-for="(listItem, listIndex) in gridList" :key="listIndex">
						<u--image :src="listItem.url" width="60px" height="60px"></u--image>
						<text class="grid-text">{{ listItem.title }}</text>
					</u-grid-item>
				</navigator>
			</u-grid>
		</view>
		<u-gap height="40"></u-gap>
		<view class="news-container">
			<view style="font-size: 18px;font-weight: bold;padding: 20rpx 0 20rpx 20rpx;">童话集锦</view>
			<u-line color="#909399" margin="10rpx 0" dashed></u-line>
			<view v-for="item in detailList" class="news-item" :key="item.id">
				<view class="news-item-content">
					<view @tap="openFairyDetail(item.id, item.name)">{{ item.name }}</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line></u-line>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import { getFairyList, getFairyDetailList, wxLogin } from '@/api/fairy.js';
export default {
	data() {
		return {
			viewHeight: 1000,
			swiperList: [
				'http://wxapi.db101.cn/images/bg.webp',
				'http://wxapi.db101.cn/images/bg1.webp'
			],
			gridList: [
			],
			current: 1,
			size: 20,
			detailList: []
		}
	},
	onLoad() {
	},
	methods: {
		fairyList() {
			let that = this;
			getFairyList().then(res => {
				res.forEach((item, index) => {
					that.gridList.push({ id: item.id, url: item.icon, title: item.name })
				})
			})
		},
		openFairyList(id, name) {
			uni.navigateTo({
				url: "/pages/fairy/fairyList?id=" + id + "&name=" + name
			})
		},
		fairyDetailList() {
			getFairyDetailList({
				current: this.current,
				categoryId: 1,
				size: this.size
			}).then(res => {
				res.forEach((item, index) => {
					this.detailList.push(item);
				})
			})
		},
		scrolltolower() {
			this.fairyDetailList();
		},
		openFairyDetail(detailId, detailName) {
			uni.navigateTo({
				url: "/pages/fairy/fairyDetail?id=" + detailId + "&name=" + detailName
			})
		},
	},
	mounted() {
		this.fairyList();
		this.fairyDetailList();
	},
	onReady() {
		let that = this;
		uni.getSystemInfo({
			success(res) {
				that.viewHeight = res.windowHeight;
			}
		})
	},
	onShow() {
		// 判断是否已经登录
		if (!uni.getStorageSync('setUserLoggedIn')) {
			// 进行登录操作
			uni.login({
				provider: "weixin",
				success: (res) => {
					// 进行后台登录
					wxLogin({
						code: res.code
					}).then(res => {
						uni.setStorageSync("userInfo", res)
						uni.setStorageSync('setUserLoggedIn', true)
					})
				}
			})
		}
	}
}
</script>

<style>
.swiper-container {
	margin: 0rpx 20rpx;
}

.news-title {
	font-size: 16rpx;
}

.news-first {
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: nowrap;
	height: 60rpx;
}

.news-container {
	background-color: #fff;
	border-radius: 20rpx;
	margin: 0 20rpx;
}

.news-item-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
}

.news-item-content:active {
	background-color: lightgray;
}

.vertical-line {
	width: 2rpx;
	/* 竖线的宽度 */
	height: 60%;
	/* 竖线的高度，根据需要调整 */
	background-color: #000;
	/* 竖线的颜色 */
	opacity: 0.3;
	margin: 0 20rpx;
}

.grid-text {
	font-size: 14px;
	color: #909399;
	padding: 10rpx 0 20rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}
</style>
